<template>
  <div class="Huangsolt">
    <div class="channel-container">
      <div 
       v-for="item in channelItems" 
       :key="item.id" 
       class="channel-item" 
      @click="goToChannel(item.id)"
      >
        <img :src="item.icon" :alt="item.title" class="channel-icon" />
        <span class="channel-title">{{ item.title }}</span>
      </div>
    </div>
  </div>
  <div></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios' 
import { useRouter } from 'vue-router'

const router = useRouter()
function goToChannel(id) {
  router.push(`/huangchannel`)
}
const channelItems = ref([])
const apiUrl = 'Huangslot'

onMounted(() => {
  axios.get(apiUrl)
    .then(response => {
      channelItems.value = response.data 
    })
    .catch(error => {
      console.error('Error fetching Huangslot data:', error)
    })
})
</script>

<style scoped>
.channel-container {
  display: grid;
  grid-template-columns: repeat(5, minmax(80px, 1fr));
  gap: 16px;
  padding: 16px;
  justify-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.channel-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 8px;
  width: 100%;
  padding: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* PC端样式（大于768px） */
@media (min-width: 768px) {
  .channel-container {
    grid-template-columns: repeat(5, minmax(60px, 1fr)); /* 调整列宽 */
    gap: 12px; /* 调整间距 */
  }

  .channel-item {
    flex-direction: row; /* 横向排列 */
    justify-content: start;
    height: 50px;
    width: 90%; /* 确保宽度适应新的列宽 */
  }
  
  .channel-icon {
    width: 30px; /* 调整图标大小 */
    height: 30px;
    margin-right: 8px; /* 调整图标与标题的间距 */
    margin-bottom: 0;
  }

  .channel-title {
    font-size: 14px; /* 调整字体大小 */
    white-space: nowrap;
  }
}

/* 移动端样式（小于768px） */
@media (max-width: 767px) {
  .channel-container {
    grid-template-columns: repeat(5, minmax(60px, 1fr));
    gap: 8px;
    padding: 8px;
  }

  .channel-item {
    flex-direction: column; /* 纵向排列 */
    justify-content: center;
    height: 80px;
    background-color: transparent; /* 移除背景 */
    box-shadow: none; /* 移除阴影 */
    padding: 4px;
  }

  .channel-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 6px;
  }

  .channel-title {
    font-size: 14px;
    line-height: 1.2;
    word-break: keep-all;
  }
}

/* 超小屏幕优化（小于375px） */
@media (max-width: 374px) {
  .channel-container {
    grid-template-columns: repeat(5, minmax(50px, 1fr));
    gap: 4px;
  }
  
  .channel-item {
    height: 70px;
  }
  
  .channel-icon {
    width: 22px;
    height: 22px;
  }
  
  .channel-title {
    font-size: 13px;
  }
}

.channel-icon {
  transition: transform 0.2s;
}

.channel-title {
  color: #333;
  text-align: center;
  transition: color 0.2s;
}

.channel-item:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 移动端移除hover效果 */
@media (hover: none) {
  .channel-item:hover {
    transform: none;
    box-shadow: none;
  }
}
</style>
